<template>
  <PageWrapper>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="font-size: 16px"
    >
      <el-breadcrumb-item :to="{ path: '/console' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br /><br />
    <PageContentWrapper>
      <el-form
        :inline="true"
        ref="form"
        :model="filterParams"
        class="demo-form-inline"
      >
        <el-form-item label="选择操作模块">
          <el-select
            v-model="filterParams.moduleType"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in moduleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            @change="setTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="timeInterVal"
            type="daterange"
            clearable
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model.trim="filterParams.keyWord"
            clearable
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- table -->
      <el-card shadow="nerver" class="base-table">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="moduleTypeName"
            label="操作模块"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="targetName"
            label="操作对象"
            align="center"
          ></el-table-column>
          <el-table-column label="修改前" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover placement="top" trigger="hover">
                <pre class="handleLog-pre" v-html="getJson(row.oldJson)"></pre>
                <div class="record-text" slot="reference">
                  {{ row.oldJson }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="修改后" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover placement="top" trigger="hover">
                <pre class="handleLog-pre" v-html="getJson(row.json)"></pre>
                <div class="record-text" slot="reference">{{ row.json }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="操作人"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createAt"
            label="操作时间"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="operationTypeName"
            label="操作类型"
            width="180"
            align="center"
          ></el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.current"
          :page-size="pagination.size"
          layout="total, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </el-card>
    </PageContentWrapper>
  </PageWrapper>
</template>
<script>
// import enterKeyCbMixins from "@/mixins/enterKeyCbMixins.js";
export default {
  //   mixins: [enterKeyCbMixins],
  data() {
    return {
      filterParams: {
        moduleType: "",
        startTime: "",
        endTime: "",
        keyWord: "",
      },
      timeInterVal: [],
      moduleOptions: [],
      pagination: {
        // 分页器信息
        total: 1,
        current: 1,
        size: this.$store.state.defaultPageSize,
      },
      tableData: [
        {
          id: "9743",
          moduleTypeName: "文件管理",
          targetName: "我的文件",
          oldJson: {
            content: [
              {
                id: 1,
                name: "我的文件",
                ProSort: 1,
                pid: "",
                isEdit: false,
              },
            ],
          },
          json: {
            content: [
              {
                id: 2,
                name: "个人文件",
                ProSort: 1,
                pid: "",
                isEdit: false,
              },
            ],
          },
          userName: "admin",
          createAt: "2022-04-01 10:00:15",
          operationTypeName: "运行",
        },
        {
          id: "9353",
          moduleTypeName: "个人信息管理",
          targetName: "我的头像",
          oldJson: {
            content: [
              {
                id: 1,
                name: "panda.png",
                ProSort: 1,
                pid: "",
                isEdit: false,
              },
            ],
          },
          json: {
            content: [
              {
                id: 2,
                name: "hello.jpg",
                ProSort: 1,
                pid: "",
                isEdit: false,
              },
            ],
          },
          userName: "student",
          createAt: "2022-04-02 16:00:15",
          operationTypeName: "运行",
        },
        {
          id: "9794",
          moduleTypeName: "权限管理",
          targetName: "权限列表",
          oldJson: {
            content: [
              {
                id: 1,
                name: "用户列表",
                ProSort: 1,
                pid: "",
                isEdit: false,
              },
            ],
          },
          json: {
            content: [
              {
                id: 2,
                name: "用户修改",
                ProSort: 1,
                 
                pid: "",
                isEdit: false,
              },
            ],
          },
          userName: "admin",
          createAt: "2022-03-21 10:00:15",
          operationTypeName: "上线",
        },
        {
          id: "9189",
          moduleTypeName: "用户管理",
          targetName: "用户列表",
          oldJson: {
            content: [
              {
                id: 1,
                name: "xiaoming",
                ProSort: 1,
                 
                pid: "",
                isEdit: false,
              },
            ],
          },
          json: {
            content: [
              {
                id: 2,
                name: "小爱",
                ProSort: 1,
                 
                pid: "",
                isEdit: false,
              },
            ],
          },
          userName: "admin",
          createAt: "2022-04-01 10:00:15",
          operationTypeName: "运行",
        },
        {
          id: "9493",
          moduleTypeName: "教工服务",
          targetName: "题库",
          oldJson: {
            content: [
              {
                id: 1,
                name: "java的特性是",
                ProSort: 1,
                 
                pid: "",
                isEdit: false,
              },
            ],
          },
          json: {
            content: [
              {
                id: 2,
                name: "数据结构的概念",
                ProSort: 1,
                 
                pid: "",
                isEdit: false,
              },
            ],
          },
          userName: "teacher",
          createAt: "2022-03-31 13:10:15",
          operationTypeName: "运行",
        },
      ],
      tableLoading: false,
    };
  },
  mounted() {
    this.queryTable();
    this.getOptions();
  },
  methods: {
    getJson(val) {
      let json = "";
      if (val) {
        try {
          let obj = {};
          obj = typeof val === "object" ? val : JSON.parse(val);
          json = JSON.stringify(obj, null, 4);
          return this.syntaxHighlight(json);
        } catch (err) {
          json = val;
          return json;
        }
      }
    },
    // 高亮处理json
    syntaxHighlight(json) {
      if (typeof json !== "string") {
        json = JSON.stringify(json, undefined, 2);
      }
      json = json
        .replace(/&/g, "&")
        .replace(/</g, "<")
        .replace(/>/g, ">");
      return json.replace(
        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function(match) {
          var cls = "jsonnumber";
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = "jsonkey";
            } else {
              cls = "jsonstring";
            }
          } else if (/true|false/.test(match)) {
            cls = "jsonboolean";
          } else if (/null/.test(match)) {
            cls = "jsonnull";
          }
          return '<span class="' + cls + '">' + match + "</span>";
        }
      );
    },
    //
    getOptions() {
        //TODO
      this.$api.system.moduleList().then((res) => {
        this.moduleOptions = res;
      });
    },
    // 设置时间
    setTime(timeArr) {
      if (timeArr) {
        this.filterParams.startTime = timeArr[0];
        this.filterParams.endTime = timeArr[1];
      } else {
        this.filterParams.startTime = "";
        this.filterParams.endTime = "";
      }
    },
    handleQuery() {
      this.pagination.current = 1;
      this.queryTable();
    },
    // 页码改变触发
    handleCurrentChange() {
      this.queryTable();
    },
    queryTable() {
      const param = Object.assign(
        {},
        { projectId: this.projectId },
        this.pagination,
        this.filterParams
      );
      delete param.total;
      this.tableLoading = true;
      //TODO
      let getDataFn = this.$api.system.handleLog(param);
      this.$minLoadingTime(getDataFn)
        .then((res) => {
          const resData = res[0];
          this.tableData = resData.item;
          this.pagination.total = resData.total;
          this.pagination.current = resData.current;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
<style>
.record-text {
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handleLog-pre {
  padding: 5px 10px;
  margin: 5px;
  word-break: break-all;
  max-height: 500px;
  overflow: auto;
  max-width: 800px;
}
.jsonstring {
  color: #3ab54a;
}
.jsonnumber {
  color: #25aae2;
}
.jsonboolean {
  color: blue;
}
.jsonnull {
  color: #f1592a;
}
.jsonkey {
  color: #92278f;
}
</style>
